<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body { margin: 0; padding: 0; }
    /* #map { position: absolute; top: 0; bottom: 0; width: 100%; } */
    #map {width: 800px; height: 800px;}
  </style>

<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />

</head>
<body>
  <div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiemh1eGlhb2h1aSIsImEiOiJjazc1b2h5NDIwMHNvM2ZtdWtkbmFxbzBxIn0.afwINcsqEXvVB_bWdOnSpQ';
var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [0, 0],
	zoom: 2
});
var size = 80;

// implementation of CustomLayerInterface to draw a pulsing dot icon on the map
// see https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface for more info
var pulsingDot = {
	width: size,
	height: size,
	data: new Uint8Array(size * size * 4),

	// get rendering context for the map canvas when layer is added to the map
	onAdd: function() {
		var canvas = document.createElement('canvas');
		canvas.width = this.width;
		canvas.height = this.height;
		this.context = canvas.getContext('2d');
	},

	// called once before every frame where the icon will be used
	render: function() {
		var duration = 1000;
		var t = (performance.now() % duration) / duration;

		var radius = (size / 2) * 0.3;
		var outerRadius = (size / 2) * 0.7 * t + radius;
		var context = this.context;

		// draw outer circle
		context.clearRect(0, 0, this.width, this.height);
		context.beginPath();
		context.arc(
		this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
		context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
		context.fill();

		// draw inner circle
		context.beginPath();
		context.arc(
		this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
		context.fillStyle = 'rgba(255, 100, 100, 1)';
		context.strokeStyle = 'white';
		context.lineWidth = 2 + 4 * (1 - t);
		context.fill();
		context.stroke();

		// update this image's data with data from the canvas
		this.data = context.getImageData(
		0, 0, this.width, this.height).data;

		// continuously repaint the map, resulting in the smooth animation of the dot
		map.triggerRepaint();

		// return `true` to let the map know that the image was updated
		return true;
	}
};

map.on('load', function() {
	map.addImage('pulsing-dot', pulsingDot, {
		pixelRatio: 2
	});

	map.addSource('points', {
		'type': 'geojson',
		'data': {
			'type': 'FeatureCollection',
			'features': [{
				'type': 'Feature',
				'geometry': {
					'type': 'Point',
					'coordinates': [0, 0]
				}
			},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [31.5702508,120.2426131]
},
"properties": {
"color": "255,209,28"
}
}]
		}
	});
	map.addLayer({
		'id': 'points',
		'type': 'symbol',
		'source': 'points',
		'layout': {
			'icon-image': 'pulsing-dot'
		}
	});
});





</script>
</body>
</html>